<template>
	<view class="content">
		<map :longitude="longitude" :latitude="latitude" :markers="covers" style="width: 100vw; height: 100vh;"></map>
		<!-- <button class="btn" @click="getLocations">获取位置</button> -->
		<view class="text">
			<text class="content" @tap="choose">{{address}}</text>
			<img class="img" src="../../static/daohang1.png">
		</view>
	</view>
</template>

<script>
	// 引入SDK核心类，js文件根据自己业务，位置可自行放置
	var QQMapWX = require('../../static/qqmap-wx-jssdk');
	var qqmapsdk;
	export default {
		data() {
			return {
				title: 'map',
				name: '杭州市',
				address: '',
				latitude: null,
				longitude: null,
				
				covers: [{
					id: 1,
					title: '',
					latitude: null,
					longitude: null,
					iconPath: '../../static/wxbdingwei.png',
					width: 35,
					height: 35,
					label:{
						content:'',
						color:'red',
						fontSize:20,
						bgColor:'black'
					}
				}]
			}
		},
		onLoad() {
			// 实例化API核心类
			qqmapsdk = new QQMapWX({
				key: '7IWBZ-PBQ37-G2QXV-PEOPS-XCDLQ-ACBHN'
			});
			this.getLocations()
		},
		onShow() {},
		methods: {
			choose() {
				var _this=this
				uni.chooseLocation({
					success(res) {
						console.log(res,111);
						_this.address = res.address
						_this.latitude = res.latitude
						_this.longitude = res.longitude
						console.log(_this.longitude,_this.latitude, _this.covers);
						_this.covers[0].label.content = res.name
						_this.covers[0].title = res.name
						_this.covers[0].latitude = res.latitude
						_this.covers[0].longitude = res.longitude
					},
					fail(error) {
						console.log(erros, 222);
					}
				})
			},
			// clickMap(e) {
			// 	console.log(e);
			// 	uni.openLocation({
			// 		longitude: Number(this.longitude),
			// 		latitude: Number(this.latitude),
			// 		name: this.name,
			// 		address: this.address
			// 	})
			// },
			getLocations() {
				// console.log(1);
				var stat = this
				uni.getLocation({
					success(res) {
						// console.log(qqmapsdk);
						// console.log(res.latitude);
						// console.log(res.longitude);
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							coord_type: 1,
							success(res2) {
								stat.address = res2.result.address
								stat.latitude = res2.result.location.lat
								stat.longitude = res2.result.location.lng
								stat.covers[0].label.content=res2.result.address_component.street
								stat.covers[0].title=res2.result.address
								// console.log(stat.covers);
								stat.covers[0].latitude = res2.result.location.lat
								stat.covers[0].longitude = res2.result.location.lng
							},
							fail(error) {
								console.log(erros);
							}

						})
					},
					fail(error) {
						console.log(error, 3);
					}
				})
			}
		}
	}
</script>

<style>
	.text {
		width: 100vw;
		height: 50px;
		line-height: 50px;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
		background-color: rgba(0, 0, 0, .5);
		color: #fff;
		padding: 0 20px;
	}

	.content {
		width: 300px;
		height: 100%;
	}

	.img {
		margin-left: 30px;
		width: 25px;
		height: 25px;
		/* background-color: chartreuse; */
	}

	.btn {
		position: fixed;
		bottom: 50px;
		left: 0;
	}
</style>